<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-spin :spinning="loading">
      <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
        <a-form-model-item has-feedback label="机构名称" prop="name">
          <a-input v-model="ruleForm.name" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item has-feedback label="logo">
          <div class="ant-upload-preview" @click="$refs.modal.edit(1)" style="cursor: pointer;">
            <a-icon type="cloud-upload-o" class="upload-icon" />
            <div class="mask">
              <a-icon type="plus" />
            </div>
            <img :src="option.img" />
          </div>
        </a-form-model-item>
        <a-form-model-item label="机构介绍">
          <a-textarea rows="4" placeholder="请填写机构描述" v-model="ruleForm.introduction" />
        </a-form-model-item>
        <a-form-model-item label="咨询老师">
          <a-input v-model="ruleForm.consult_teacher" />
        </a-form-model-item>
        <a-form-model-item label="咨询电话">
          <a-input v-model="ruleForm.phone" />
        </a-form-model-item>
        <a-form-model-item label="机构地址">
          <a-input v-model="ruleForm.address" />
        </a-form-model-item>
        <a-form-model-item :wrapperCol="{ span: 5 }" style="text-align: center">
          <a-button htmlType="submit" type="primary" @click="submit">保存</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
    <upload-avatar ref="modal" @ok="setavatar" />
  </a-card>
</template>

<script>
import store from '@/store'
import { getSchoolInfo, changeSchool } from '@/api/organization'
import { mapActions } from 'vuex'
import uploadAvatar from '@/components/uploadAvatar'
export default {
  name: 'organizationInfo',
  components: {
    uploadAvatar
  },
  inject: ['reload'],
  data() {
    return {
      loading: false,
      description: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
      value: 1,
      store_user: null, //学校ID
      ruleForm: {
        name: '',
        phone: '',
        introduction: '',
        address: '',
        logo: '',
        consult_teacher: ''
      },
      rules: {
        name: [{ required: true, message: '请输入机构名称！' }]
      },
      layout: {
        labelCol: { span: 2 },
        wrapperCol: { span: 6 }
      },
      option: {
        img: '',
        info: true,
        size: 1,
        outputType: 'jpeg',
        canScale: false,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 180,
        autoCropHeight: 180,
        fixedBox: true,
        // 开启宽度和高度比例
        fixed: true,
        fixedNumber: [1, 1]
      }
    }
  },
  created() {
    this.store_user = this.$store.state.user
    this.loading = true
    getSchoolInfo(this.store_user.school).then(res => {
      this.ruleForm = res
      this.option.img = res.logo.url
      this.loading = false
    })
  },
  methods: {
    ...mapActions(['Login', 'GetInfo']),
    setavatar(res) {
      //上传图片
      this.option.img = res.url
      
      this.ruleForm.logo = res
     
    },
    submit(e) {
      e.preventDefault()
      let parmas = JSON.parse(JSON.stringify(this.ruleForm))
      this.loading = true
      changeSchool(parmas, this.store_user.school)
        .then(res => {
          this.loading = false
          this.$message.success('保存成功')
          this.GetInfo()
          this.reload()
        })
        .catch(err => {
          this.loading = false
          this.$message.error(err.data.message || '设置失败，请稍后重试')
        })
    }
  }
}
</script>
<style lang="less" scoped>
.expand_warning {
  margin-top: 16px;
  background-color: #fff0e7;
  border-radius: 4px;
}
.ant-upload-preview {
  position: relative;
  margin-left: 10px;
  width: 100%;
  max-width: 64px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;

  .upload-icon {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 1rem;
    // padding: 0.5rem;
    background: rgba(222, 221, 221, 0.7);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  .mask {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: opacity 0.4s;

    &:hover {
      opacity: 1;
    }

    i {
      font-size: 1rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -0.5rem;
      margin-top: -0.5rem;
      color: #d6d6d6;
    }
  }

  img,
  .mask {
    width: 100%;
    max-width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
  }
}
</style>